<template>
  <div class="message">
    <!-- 标题 -->
    <div class="title">
      <span @click="$router.go(-1)"><van-icon name="arrow-left" /></span>
      <span style="font-weight: 600">消息通知</span>
      <span></span>
    </div>
    <ul class="ul">
      <li>
        <img src="../assets/message1.png" alt="" />
        <h5>课程通知</h5>
      </li>
      <li>
        <img src="../assets/message2.png" alt="" />
        <h5>系统通知</h5>
      </li>
      <li>
        <img src="../assets/message3.png" alt="" />
        <h5>订单通知</h5>
      </li>
    </ul>
  </div>
</template>

<script setup>
import { ref, reactive, toRefs } from "vue";
</script>
<style lang="scss" scoped>
.message {
  font-size: 20px;
  width: 100%;
  font-family: PingFangSC-Regular;
}
.title {
  background: #fff;
  display: flex;
  padding: 19px;
  border-bottom: 5px solid #efebeb;
  justify-content: space-between;
  align-items: center;
  font-size: 20px;
  margin-bottom: 20px;
}
.ul {
  li {
    display: flex;
    align-items: center;
    padding: 10px 20px;
    border-bottom: #efebeb 1px solid;
    img {
      width: 100px;
      height: 100px;
      margin-right: 20px;
    }
  }
}
</style>